<html dir="ltr" lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="google" value="notranslate">

    <script>
        function addRow(name, url, isdir,
                        size, size_string, date_modified, date_modified_string) {
            if (name == "." || name == "..")
                return;

            var root = document.location.pathname;
            if (root.substr(-1) !== "/")
                root += "/";

            var tbody = document.getElementById("tbody");
            var row = document.createElement("tr");
            var file_cell = document.createElement("td");
            var link = document.createElement("a");

            link.className = isdir ? "icon dir" : "icon file";

            if (isdir) {
                name = name + "/";
                url = url + "/";
                size = 0;
                size_string = "";
            } else {
                link.draggable = "true";
                link.addEventListener("dragstart", onDragStart, false);
            }
            link.innerText = name;
            link.href = root + url;

            file_cell.dataset.value = name;
            file_cell.appendChild(link);

            row.appendChild(file_cell);
            row.appendChild(createCell(size, size_string));
            row.appendChild(createCell(date_modified, date_modified_string));

            tbody.appendChild(row);
        }

        function onDragStart(e) {
            var el = e.srcElement;
            var name = el.innerText.replace(":", "");
            var download_url_data = "application/octet-stream:" + name + ":" + el.href;
            e.dataTransfer.setData("DownloadURL", download_url_data);
            e.dataTransfer.effectAllowed = "copy";
        }

        function createCell(value, text) {
            var cell = document.createElement("td");
            cell.setAttribute("class", "detailsColumn");
            cell.dataset.value = value;
            cell.innerText = text;
            return cell;
        }

        function start(location) {
            var header = document.getElementById("header");
            header.innerText = header.innerText.replace("LOCATION", location);

            document.getElementById("title").innerText = header.innerText;
        }

        function onHasParentDirectory() {
            var box = document.getElementById("parentDirLinkBox");
            box.style.display = "block";

            var root = document.location.pathname;
            if (!root.endsWith("/"))
                root += "/";

            var link = document.getElementById("parentDirLink");
            link.href = root + "..";
        }

        function onListingParsingError() {
            var box = document.getElementById("listingParsingErrorBox");
            box.innerHTML = box.innerHTML.replace("LOCATION", encodeURI(document.location)
                + "?raw");
            box.style.display = "block";
        }

        function sortTable(column) {
            var theader = document.getElementById("theader");
            var oldOrder = theader.cells[column].dataset.order || '1';
            oldOrder = parseInt(oldOrder, 10)
            var newOrder = 0 - oldOrder;
            theader.cells[column].dataset.order = newOrder;

            var tbody = document.getElementById("tbody");
            var rows = tbody.rows;
            var list = [], i;
            for (i = 0; i < rows.length; i++) {
                list.push(rows[i]);
            }

            list.sort(function (row1, row2) {
                var a = row1.cells[column].dataset.value;
                var b = row2.cells[column].dataset.value;
                if (column) {
                    a = parseInt(a, 10);
                    b = parseInt(b, 10);
                    return a > b ? newOrder : a < b ? oldOrder : 0;
                }

                // Column 0 is text.
                if (a > b)
                    return newOrder;
                if (a < b)
                    return oldOrder;
                return 0;
            });

            // Appending an existing child again just moves it.
            for (i = 0; i < list.length; i++) {
                tbody.appendChild(list[i]);
            }
        }
    </script>

    <style>

        h1 {
            border-bottom: 1px solid #c0c0c0;
            margin-bottom: 10px;
            padding-bottom: 10px;
            white-space: nowrap;
        }

        table {
            border-collapse: collapse;
        }

        th {
            cursor: pointer;
        }

        td.detailsColumn {
            -webkit-padding-start: 2em;
            text-align: end;
            white-space: nowrap;
        }

        a.icon {
            -webkit-padding-start: 1.5em;
            text-decoration: none;
        }

        a.icon:hover {
            text-decoration: underline;
        }

        a.file {
            background: url(" ") left top no-repeat;
        }

        a.dir {
            background: url(" ") left top no-repeat;
        }

        a.up {
            background: url(" ") left top no-repeat;
        }

        html[dir=rtl] a {
            background-position-x: right;
        }

        #parentDirLinkBox {
            margin-bottom: 10px;
            padding-bottom: 10px;
        }

        #listingParsingErrorBox {
            border: 1px solid black;
            background: #fae691;
            padding: 10px;
            display: none;
        }
    </style>

    <title id="title">{{ title }}</title>

</head>

<body>

<div id="listingParsingErrorBox">糟糕！Google Chrome无法解读服务器所发送的数据。请<a
        href="http://code.google.com/p/chromium/issues/entry">报告错误</a>，并附上<a href="LOCATION">原始列表</a>。
</div>

<h1 id="header">D:\app\www\ 的索引</h1>

<div id="parentDirLinkBox" style="display: block;">
    <a id="parentDirLink" class="icon up" href="/D:/app/www/..">
        <span id="parentDirText">[上级目录]</span>
    </a>
</div>

<table>
    <thead>
    <tr class="header" id="theader">
        <th onclick="javascript:sortTable(0);">名称</th>
        <th class="detailsColumn" onclick="javascript:sortTable(1);">
            大小
        </th>
        <th class="detailsColumn" onclick="javascript:sortTable(2);">
            修改日期
        </th>
    </tr>
    </thead>
    <tbody id="tbody">
    <tr>
        <td data-value="apple/"><a class="icon dir" href="/D:/app/www/apple/"></a></td>
        <td class="detailsColumn" data-value="0"></td>
        <td class="detailsColumn" data-value="1561793680">2019/6/29 下午3:34:40</td>
    </tr>
    {{ each files }}
        <tr>
            <td data-value="img/"><a class="icon dir" href="/D:/app/www/img/">{{ $value }}</a></td>
            <td class="detailsColumn" data-value="0"></td>
            <td class="detailsColumn" data-value="1561796674">2019/6/29 下午4:24:34</td>
        </tr>
    {{ /each }}
    </tbody>
</table>
</body>
</html>
